import React, { useState } from "react";
import {
  Card,
  Steps,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  InputNumber,
  Radio,
  message,
} from "antd";
import "./index.less";

const { Option } = Select;
const { TextArea } = Input;

const StepForm: React.FC = () => {
  const [current, setCurrent] = useState(0);
  const [form] = Form.useForm();

  const steps = [
    {
      title: "第一步",
      content: "填写基本信息",
    },
    {
      title: "第二步",
      content: "填写详细信息",
    },
    {
      title: "第三步",
      content: "提交审核",
    },
  ];

  const next = async () => {
    try {
      const values = await form.validateFields();
      console.log("表单值:", values);
      setCurrent(current + 1);
    } catch (error) {
      console.error("验证失败:", error);
    }
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  const onFinish = async () => {
    try {
      const values = await form.validateFields();
      console.log("提交表单:", values);
      message.success("提交成功！");
    } catch (error) {
      console.error("提交失败:", error);
    }
  };

  const renderStepContent = () => {
    switch (current) {
      case 0:
        return (
          <>
            <Form.Item
              label="标题"
              name="title"
              rules={[{ required: true, message: "请输入标题" }]}
              data-oid="h19f8u:"
            >
              <Input placeholder="请输入标题" data-oid=".mp5ks7" />
            </Form.Item>

            <Form.Item
              label="类型"
              name="type"
              rules={[{ required: true, message: "请选择类型" }]}
              data-oid="6nlj7rf"
            >
              <Select data-oid="ao907ye">
                <Option value="public" data-oid="gc4oz:p">
                  公开
                </Option>
                <Option value="private" data-oid="52wb0_f">
                  私密
                </Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="开始日期"
              name="startDate"
              rules={[{ required: true, message: "请选择开始日期" }]}
              data-oid="0prf0vz"
            >
              <DatePicker style={{ width: "100%" }} data-oid="ojy6jhs" />
            </Form.Item>
          </>
        );

      case 1:
        return (
          <>
            <Form.Item
              label="目标"
              name="goal"
              rules={[{ required: true, message: "请输入目标" }]}
              data-oid="rk1ng9q"
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={100}
                placeholder="请输入目标"
                data-oid="7x9c0zb"
              />
            </Form.Item>

            <Form.Item
              label="标准"
              name="standard"
              rules={[{ required: true, message: "请输入标准" }]}
              data-oid="2r75mdn"
            >
              <TextArea rows={4} placeholder="请输入标准" data-oid="bf1b:8m" />
            </Form.Item>

            <Form.Item
              label="客户"
              name="client"
              rules={[{ required: true, message: "请选择客户" }]}
              data-oid="d454hnz"
            >
              <Select data-oid="__y_3_t">
                <Option value="client1" data-oid="pto8v2a">
                  客户1
                </Option>
                <Option value="client2" data-oid="m_uua.r">
                  客户2
                </Option>
                <Option value="client3" data-oid="ete3bgs">
                  客户3
                </Option>
              </Select>
            </Form.Item>
          </>
        );

      case 2:
        return (
          <>
            <Form.Item
              label="邀请人"
              name="invites"
              rules={[{ required: true, message: "请选择邀请人" }]}
              data-oid="w.7ct6v"
            >
              <Select
                mode="multiple"
                placeholder="请选择邀请人"
                data-oid="_xnmjer"
              >
                <Option value="user1" data-oid="j.1cevs">
                  张三
                </Option>
                <Option value="user2" data-oid="qbglkur">
                  李四
                </Option>
                <Option value="user3" data-oid="odaijxl">
                  王五
                </Option>
              </Select>
            </Form.Item>

            <Form.Item
              label="权重"
              name="weight"
              rules={[{ required: true, message: "请输入权重" }]}
              data-oid="yfw-72e"
            >
              <InputNumber
                style={{ width: "100%" }}
                min={0}
                max={100}
                placeholder="请输入权重"
                data-oid="4ne5v2g"
              />
            </Form.Item>

            <Form.Item
              label="状态"
              name="status"
              rules={[{ required: true, message: "请选择状态" }]}
              data-oid="oez39ad"
            >
              <Radio.Group data-oid="j__vpbf">
                <Radio value="active" data-oid="dcskr13">
                  启用
                </Radio>
                <Radio value="inactive" data-oid="cwrg1nh">
                  停用
                </Radio>
              </Radio.Group>
            </Form.Item>
          </>
        );

      default:
        return null;
    }
  };

  return (
    <div className="pro-step-form" data-oid="10r75jj">
      <Card className="pro-card" data-oid="1hjpln3">
        <Steps
          current={current}
          items={steps.map((item) => ({ title: item.title }))}
          className="pro-steps"
          data-oid="9v.80-v"
        />

        <div className="pro-steps-content" data-oid="lzzk3c0">
          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            initialValues={{
              type: "private",
              status: "active",
            }}
            data-oid="-9zs3lx"
          >
            {renderStepContent()}
            <div className="pro-steps-action" data-oid="_nts512">
              {current > 0 && (
                <Button
                  style={{ marginRight: 8 }}
                  onClick={prev}
                  data-oid="tnu2qqs"
                >
                  上一步
                </Button>
              )}
              {current < steps.length - 1 && (
                <Button type="primary" onClick={next} data-oid="66fc5ts">
                  下一步
                </Button>
              )}
              {current === steps.length - 1 && (
                <Button type="primary" onClick={onFinish} data-oid="u8-loem">
                  提交
                </Button>
              )}
            </div>
          </Form>
        </div>
      </Card>
    </div>
  );
};

export default StepForm;
